<template>
  <div style="margin-top:2.6rem;margin-bottom:3.5rem">
    <section class="nav-week">
      <mt-button v-for="i in weekNum" :key="i" size="small" :class="{'currDate' : i-1 == weekIndex}"
        @click="getDoctorPaibanlist(i-1)" v-html="getDateItem(i-1)"
      ></mt-button>
    </section>
    <section>
      <!-- <div class="showDoctorPaiBan"> -->
      <div class="tip_mes" v-if="doctorList.length==0">
        暂无排班信息
      </div>
      <div v-if="doctorList.length>0" class="showDoctorPaiBan" style="margin-top:0.5rem" v-infinite-scroll="loadMore"
        infinite-scroll-disabled="busy"
        infinite-scroll-distance="10"
      >
        <transition-group name="list" tag="p" mode="in-out">
          <div v-for="(item,index) in doctorList" :key="index+1" class="t_c_content"> <!-- 不知为什么直接写index报错 -->
            <div style="margin:0.4rem">
              <span v-show="showaveter == 'S'">
                <img :src="root + item.DOCTOR_PIC_URL"/>
              </span>
              <span>
                <p>{{item.DOC_NAME}}&nbsp;&nbsp;{{item.ZYDJ}}&nbsp;&nbsp;{{item.ONDUTY | showAMPM}}</p>
                <p>{{item.GRJJ}}</p>
              </span>
            </div>
            <nuxt-link :to="{path:'/yuyue/yuyueAdd',query:{ dateValue:dateValue, onduty:item.ONDUTY, dayCount: dayCount,docName: item.DOC_NAME,DOCTOR_PIC_URL: item.DOCTOR_PIC_URL,ZYDJ:item.ZYDJ,SSKBMC:item.SSKBMC,docid:item.DOCID}}" tag="div" class="t_c_right">预约挂号</nuxt-link>
            <!-- <nuxt-link tag="div" :to="{name: 'yuyue-yuyueAdd', query: {docInfo: item, dayCount: dayCount, docName: item.DOC_NAME}}" class="t_c_right">预约挂号</nuxt-link> -->
            <!-- <div @click="goYuyueadd(item,dayCount)" class="t_c_right">预约挂号</div> -->
          </div>
          <!-- <div v-if="doctorList.length==0"><center>暂无排班</center></div> -->
        </transition-group>
        <p class="loadingT">{{loadingText}}</p>
      </div>
      <!-- </div> -->
    </section>
  </div>
</template>
<script>
const { config } = window;

export default {

  data() {
    return {
      //
      busy: true,
      loadingText: '',
      page: 1,

      dateValue: '',
      showaveter: `${config.SHOWAEVTER}`,
      weekNum: 7, // 一周7天加今天是8
      weekIndex: 1, // 周几的角标,  页面初始默认第1天
      currDate_0: true,
      ts: this.newStore(),
      tq: this.getData(),
      DATA: {
        exact_date: '', // 排班日期
        week_day: '', // 星期
        am_stay: '', // 上午是否排班y-是n-否
        pm_stay: '', // 下午是否排班y-是n-否
        rowsperpage: '10',
        page: '1',
      },
      root: `${config.APIRoot}/doctor`,
      active: 'tab-container2',
      ifCurrentTab: 0,
      dayCount: 0,
      doctorList: [
        /* {
        schedule_id: '100001',
        docid: '100001',
        doc_name: '张三',
        doc_sex: '男',
        zydj: '副主任医师',
        zyzh: 'P0380300023',
        sfzh: '654321321545545654',
        lxdh: '123456789',
        lxdz: '天津武清',
        ssyyid: '10001',
        ssyymc: '华天医院',
        sskbid: '001',
        sskbmc: '中医',
        photourl: '/pic/head/test.jpg',
        sc: '脾胃调理',
        grjj: '个人简介',
        exact_date: '2018-10-11',
        week_day: '4',
        am_stay: 'y',
        pm_stay: 'y',
        cre_time: '2018-10-0917：51：00',
      },
      {
        schedule_id: '100001',
        docid: '100001',
        doc_name: '张三',
        doc_sex: '男',
        zydj: '副主任医师',
        zyzh: 'P0380300023',
        sfzh: '654321321545545654',
        lxdh: '123456789',
        lxdz: '天津武清',
        ssyyid: '10001',
        ssyymc: '华天医院',
        sskbid: '001',
        sskbmc: '中医',
        photourl: '/pic/head/test.jpg',
        sc: '脾胃调理',
        grjj: '个人简介',
        exact_date: '2018-10-11',
        week_day: '4',
        am_stay: 'y',
        pm_stay: 'y',
        cre_time: '2018-10-0917：51：00',
      }
      */],
    };
  },
  components: {
  },
  created() {
    this.getDoctorPaibanlist(0);
  },
  mounted() {
    // this.getDoctorPaibanlist(1);
    // console.log(`后四天的日期${this.getNowFormatDate(4)}`);
    // this.getDateItemTT(3);
  },
  methods: {
    /*     goYuyueadd(item, dayCount) {
      this.$router.push({
        name: 'yuyue-yuyueAdd',
        query: {
          docInfo: item,
          dayCount,
          docName: item.DOC_NAME,
        },
      });
    }, */

    //
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        this.page += 1;
        this.getDoctorPaibanlist('loadmore');
      }, 500);
    },

    // 获取当前时间，格式YYYY-MM-DD， 调后台用
    getNowFormatDate(dayCount) {
      const dt = new Date();
      dt.setDate(dt.getDate() + dayCount);
      const seperator1 = '-';
      const year = dt.getFullYear();
      let month = dt.getMonth() + 1;
      let strDate = dt.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = `0${strDate}`;
      }
      const currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    // 获取当前时间，格式YYYY-MM-DD， 头部导航用
    getDateItem(dayCount) {
      let str = '';
      const dt = new Date();
      dt.setDate(dt.getDate() + dayCount);
      const seperator1 = '-';
      // const year = dt.getFullYear();
      let month = dt.getMonth() + 1;
      let strDate = dt.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = `0${strDate}`;
      }
      if (dayCount == 0) {
        str = '今&nbsp;天<br>';
      } else {
        str = `周&nbsp;${'日一二三四五六日一二三四五六'.charAt(new Date().getDay() + dayCount)}<br>`;
      }
      return str + month + seperator1 + strDate;
    },
    //
    getDateItemTT(dayCount) {
      const getd2 = this.dtime(dayCount);
      console.log(`t2测试工具显示日期：${getd2.getDateM(dayCount)}`);
    },
    //
    changeTab(tabId) {
      console.log(`tabid: ${tabId}`);
      this.ifCurrentTab = (Number(tabId) + Number(1)) % 2;
      console.log((Number(tabId) + Number(1)) % 2);
      console.log(Number(tabId) % Number(2));
      return Number(tabId) % Number(2);
    },
    //
    goqq(item) {
      this.$router.push({ name: '', query: { item } });
    },
    // 获取医生排班列表
    getDoctorPaibanlist(dayCount) {
      // 判断时间天数
      let dayTemp;
      if (dayCount == 'loadmore') {
        dayTemp = this.dayCount;
      } else {
        dayTemp = dayCount;
        this.page = 1;
        this.doctorList = [];
      }

      this.DATA.exact_date = this.getNowFormatDate(dayTemp);
      this.dateValue = this.getNowFormatDate(dayTemp); // 调用添加预约时，传递当前日期
      this.DATA.page = `${this.page}`; // 发送请求获取页面编号必须要字符

      this.tq.getDoctorPaibanlist(this.DATA).then((ts) => {
        this.doctorList = this.doctorList.concat(ts.d.DATAOBJ.DATA);
        if (ts.d.DATAOBJ.DATA.length == 0) {
          this.busy = true;
          this.loadingText = '暂无更多数据';
        } else {
          this.busy = false;
          this.loadingText = '加载中...';
        }

        this.dayCount = dayTemp;
        this.weekIndex = dayTemp;
      });
    },
    // getDoctorPaibanlist(dayCount) {
    //   const res = JSON.stringify({
    //     OTRequest: {
    //       VERSION: '1.0',
    //       TN: 'F27.APP.05.04',
    //       CLIENTID: 'YLAPP',
    //       RYBID: 'PAT',
    //       TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //       DATA: {
    //         exact_date: this.getNowFormatDate(dayCount), // 排班日期
    //         week_day: '', // 星期
    //         am_stay: '', // 上午是否排班y-是n-否
    //         pm_stay: '', // 下午是否排班y-是n-否
    //       },
    //     },
    //   });
    //   this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //     '': res,
    //   }).then((ts) => {
    //     console.log(`排班的医生列表：${JSON.stringify(ts.d.DATAOBJ)}`);
    //     this.doctorList = ts.d.DATAOBJ.DATA;
    //     console.log(`数量：${this.doctorList.length}`);
    //     this.dayCount = dayCount;
    //     this.weekIndex = dayCount;
    //   });
    // },
  },
  computed: {
  },
  filters: {
    showAMPM(value) {
      if (!value) return '';
      switch (value) {
        case 'am':
          return '上午';
        case 'pm':
          return '下午';
        default:
          return '';
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.showDoctorPaiBan::-webkit-scrollbar
    display none
.loadingT
  text-align: center;
  color: #3190e8;
.AMPM
  background: #4cd964;
  padding: 0.2rem 0.6rem;
  color: #fff;
  font-size: 0.7rem;
  border-radius: 0.2rem;
  margin-right: 0.4rem;
.tip_mes
  height 2rem
  line-height 2rem
  color #ccc
  text-align center
  font-size 0.9rem
  margin-top 0.5rem
.nav-week
  /* margin-top:2.8rem; */
  display: -webkit-box;
  white-space: nowrap;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-overflow-scrolling: touch;
  text-align: justify;
  overflow-x: initial;
  height: 3rem;
  button
    background #f1f1f1
    height 100%
    width 6rem
    text-align center
.t_c
  font-size 1rem
  ul
    li
      border-bottom 1px solid #Ccc
      height 5rem
      line-height 5rem
      display flex
      justify-content space-between
.t_c_content
  display flex
  justify-content space-between
  border-bottom 1px solid #f1f1f1
  margin 0.4rem
  span
    float left
    display inline-block

    &:first-child
      border-radius 50%
      height 4rem
      width 4rem
      line-height 4rem
      margin 0.5rem
      text-align center
      background #ccc
      img
        border-radius 50%
        width 4rem
        height 4rem
    &:last-child
      margin 1rem 0
      width 50vw
      p
        height 1.5rem
        line-height 1.5rem
        font-size 0.9rem
        color #aaa
        &:first-child
          font-size 1rem
          color black
          span
              background: #4cd964;
              padding: 0.2rem 0.6rem;
              color: #fff;
              font-size: 0.7rem;
              border-radius: 0.2rem;
              margin-right: 0.4rem;
.t_c_right
  background #26aff2
  border-radius 2rem
  height 2rem
  line-height 2rem
  margin-top 1.5rem
  padding 0 1rem
  color #fff
  font-size 0.8rem
.list-item {
  display: inline-block;
  width: 100%;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
button.currDate {
    background #26a2ff
    height 100%
    width 6rem
    text-align center
    color: #fff
}
</style>

